<template>
	<view class="home">
		<view class="homeCon" :class="!homeActive ? 'on' : ''">
			<view class="wrapper">
				<text class="iconfont iconsousuo2" @tap="navTo('/pages/index/search/search')"></text>
			</view>
			<view class="wrapper">
				<button class=" conbutton" open-type="contact"> </button>
				<text class="iconfont iconshouhoukefu" ></text>
			</view>
			<view class="wrapper">
				<text class="iconfont icongouwuche3" @tap="navTo('/pages/cart/cart', 'tab')"></text>
			</view>
		</view>
		<view class="menu" :class="'bg-' + themeColor.name" @tap.stop="open">
			<text class="iconfont iconkuaijiecaidan"></text>
		</view>
	</view>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      homeActive: true
    }
  },
  methods: {
    // 切换语言
    switchLanguage () {
      if (this._i18n.locale === 'zh') {
        this._i18n.locale = 'uyghur'
        this.currentLanguage = '切换语言'
      } else if (this._i18n.locale === 'uyghur') {
        this._i18n.locale = 'zh'
        this.currentLanguage = 'تىل ئالماشتۇرۇش'
      }
      this.$mStore.commit('setLocale', this._i18n.locale)
      uni.setNavigationBarTitle({ title: this._i18n.t('menu.my') })
      uni.setTabBarItem({ index: 0, text: this._i18n.t('menu.index') })
      uni.setTabBarItem({ index: 1, text: this._i18n.t('menu.category') })
      uni.setTabBarItem({ index: 2, text: this._i18n.t('menu.notify') })
      uni.setTabBarItem({ index: 3, text: this._i18n.t('menu.cart') })
      uni.setTabBarItem({ index: 4, text: this._i18n.t('menu.my') })
      this.homeActive = true
    },
    open () {
      this.homeActive = !this.homeActive
    },
    navTo (route, type) {
      this.homeActive = true
      if (type === 'tab') {
        this.$mRouter.switchTab({ route })
      } else {
        this.$mRouter.push({ route })
      }
    }
  }
}
</script>
<style scoped lang="scss">
	.home {
		position: fixed;
		color: white;
		right: 40upx;
		bottom: 240upx;
		/* #ifdef H5 */
		margin-bottom: env(safe-area-inset-bottom);
		/* #endif */
		text-align: center;
		z-index: 33;
		.homeCon {
			overflow: hidden;
			width: 0.86rem;
			border-radius: 0.5rem;
			transition: all 0.3s ease-in-out 0s;
			opacity: 0;
			transform: scale(0);
			height: 0;
			.wrapper {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0,0,0,.5);
				margin-bottom: $spacing-base;
				.iconfont {
					font-size: 45upx;
					opacity: 1;
					color: $color-white;
					z-index: 92;
					position: absolute;
				}
				.conbutton {
					border: 0;
					opacity: 0;
					border-radius: 0;
					z-index: 93;
					width: 100upx;
					&:after {
							//content: '';
							//position: absolute;
							//top: 50%;
							//left: 0;
							border: none;
							border-radius: 0;
							//border-right: 1upx solid;
							//transform: translateY(-50%);
							//height: 28upx;
							width: 28upx;
					}
				}

			}
		}

		.on {
			opacity: 1;
			transform: scale(1);
			height: 280upx;
			width: 72upx;
			margin-bottom: 20upx;
		}

		.menu {
			width: 72upx;
			height: 72upx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			.iconfont {
				font-size: 45upx;
				opacity: 1;
				color: $color-white;
				z-index: 92;
			}
		}
	}

</style>
